<template>
    <div class="editor-wrapper">
        <div :id="editorId"></div>
    </div>
</template>

<script>
    import Editor from 'wangeditor'
    import axios from '@/libs/api.request'
    import 'wangeditor/release/wangEditor.min.css'
    import {
        oneOf
    } from '@/libs/tools'
    export default {
        name: 'Editor',
        props: {
            value: {
                type: String,
                default: ''
            },
            /**
             * 绑定的值的类型, enum: ['html', 'text']
             */
            valueType: {
                type: String,
                default: 'html',
                validator: (val) => {
                    return oneOf(val, ['html', 'text'])
                }
            },
            /**
             * @description 设置change事件触发时间间隔
             */
            changeInterval: {
                type: Number,
                default: 200
            },
            /**
             * @description 是否开启本地存储
             */
            cache: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            editorId() {
                return `editor${this._uid}`
            }
        },
        methods: {
            setHtml(val) {
                this.editor.txt.html(val)
            }
        },
        mounted() {
            var vue = this
            this.editor = new Editor(`#${this.editorId}`)
            this.editor.customConfig.onchange = (html) => {
                let text = this.editor.txt.text()
                if (this.cache) localStorage.editorCache = html
                this.$emit('input', this.valueType === 'html' ? html : text)
                this.$emit('on-change', html, text)
            }
            this.editor.customConfig.onchangeTimeout = this.changeInterval
            // 上传本地图片
            // this.editor.customConfig.uploadImgShowBase64 = true
            // this.editor.customConfig.uploadImgServer = '/'
            this.editor.customConfig.customUploadImg = function(files, insert) {
                let headers = {
                    'Access-Control-Allow-Origin': '*',
                    'Content-Type': 'multipart/form-data'
                }
                let formData = new FormData()
                formData.append('file', files[0])

                uploadFileRequest('admin-base-ajax_get_pic_upload_sign', formData).then(response => {
                    if (response.data.code == 1) {
                        vue.$Notice.success({
                            title: '导入成功!',
                            duration: 3
                        })
                        var img_url = response.data.data.file_cdn_url
                        insert(img_url)
                    } else {
                        vue.$Notice.error({
                            title: response.data.msg,
                            duration: 3
                        })
                    }
                })
            }

            this.editor.customConfig.menus = [
                'head', // 标题
                'bold', // 粗体
                'fontSize', // 字号
                'fontName', // 字体
                'italic', // 斜体
                'underline', // 下划线
                'strikeThrough', // 删除线
                'foreColor', // 文字颜色
                'backColor', // 背景颜色
                'link', // 插入链接
                'list', // 列表
                'justify', // 对齐方式
                'quote', // 引用
                'emoticon', // 表情
                // 'image', // 插入图片
                'table', // 表格
                // 'video', // 插入视频
                'code', // 插入代码
                'undo', // 撤销
                'redo' // 重复
            ]

            // 隐藏 网络图片 tab
            this.editor.customConfig.showLinkImg = false


            // create这个方法一定要在所有配置项之后调用
            this.editor.create()
            // 如果本地有存储加载本地存储内容
            let html = this.value || localStorage.editorCache
            if (html) this.editor.txt.html(html)

        }
    }
</script>

<style lang="less">
    .editor-wrapper * {
        z-index: 100 !important;
    }

    .w-e-menu {
        z-index: 2 !important;
    }

    .w-e-text-container {
        z-index: 1 !important;
    }
</style>